<script>
import Logout from "@/components/auth/Logout.vue";

export default {
  name: "TopNavbar",
  components: {Logout},
  computed: {
    title() {
      console.log(this.$store.state)
      return "运动会信息管理系统" + " · " + this.$store.state.userType + "界面";
    },
  }
}
</script>

<template>
  <div class="top-navbar">
    <div class="top-navbar-logo">
      <img src="@/assets/nchu.png" alt="logo" />
      <span class="top-navbar-title">{{ title }}</span>
    </div>
    <div class="top-navbar-user-layer">
      <Logout/>
    </div>
  </div>
</template>

<style scoped>
  .top-navbar {
    height: 100%;
    width: 100%;
    background-color: rgb(1, 111, 160);
  }

  .top-navbar-logo {
    margin-left: 20px;
    display: flex;
    height: 100%;
    justify-content: left;
    align-items: center;
  }

  .top-navbar-logo img {
    width: 60px;
  }

  .top-navbar-title {
    margin-left: 15px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    font-family: Arial, sans-serif; /* 指定 Arial 和 sans-serif 字体族 */
  }

  .top-navbar-user-layer {
    position: absolute;
    display: flex;
    align-items: center;
    right: 0;
    top: 0;
    height: 100%;
  }

  .top-navbar-user-layer img {
    width: 20%;
  }


</style>